<template>
    <div class="testStart-pages">
        <van-nav-bar title="测试" left-arrow @click-left="goBack" />
        <div></div>
        <div class="container" v-if="testData.index < testData.question.length">
            <div class="question">
                {{
                    testData.question.length >= 1
                        ? testData.question[testData.active].correctWord
                        : ""
                }}
            </div>
            <div class="options">
                <div
                    v-for="(item, index) in testData.options"
                    :key="item + 'answer' + testData.active"
                    @click="
                        answer(
                            item,
                            testData.question[testData.active].correctAnswer,
                            testData.active
                        )
                    "
                >
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="container" v-else-if="testData.question.length >= 1">
            <van-notice-bar :text="`答题结束：正确率${getAccuracy()}%`" />
            <van-collapse v-model="activeNames" style="margin-top: 10px">
                <van-collapse-item
                    :title="item.correctWord"
                    :name="index"
                    v-for="(item, index) in testData.question"
                >
                    <p>正确答案：{{ item.correctAnswer }}</p>
                    <p>你的答案：{{ item.youAnswer }}</p>
                    <p>
                        <van-tag
                            :type="item.accuracy == 1 ? 'success' : 'danger'"
                            >{{ item.accuracy == 1 ? "正确" : "错误" }}</van-tag
                        >
                    </p>
                </van-collapse-item>
            </van-collapse>
        </div>
        <div v-else>
            <van-empty description="暂时无题目" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { generateTest } from "../api/test";
const router = useRouter();
const route = useRoute();
const activeNames = ref([""]);
const testData = ref({
    active: 0,
    question: [],
    accuracy: 0,
    options: [],
    index: 0,
});
onMounted(() => {
    getTest(route.query.test_id, route.query.test_num);
});
const getTest = async (test_id, num) => {
    const res = await generateTest({ userid: 1, wordsetid: test_id, num });
    showNotify({
        type: res.success ? "success" : "danger",
        message: res.success ? "获取成功" : "获取失败",
    });
    console.log(res.data.questions);
    if (res.success) {
        testData.value.question = res.data.questions;
        testData.value.options = res.data.questions[0].options;
    }
};
const getAccuracy = () => {
    // 统计 accuracy 为 1 的个数
    const accuracyOneCount = testData.value.question.reduce(
        (count, question) => {
            return count + (question.accuracy === 1 ? 1 : 0);
        },
        0
    );
    // 计算百分比
    const totalQuestions = testData.value.question.length;
    const accuracyPercentage = (accuracyOneCount / totalQuestions) * 100;

    return accuracyPercentage.toFixed(2); // 保留两位小数返回百分比值
};
const answer = (text, answerText, index) => {
    try {
        let active = testData.value.active;
        active =
            active >= testData.value.question.length - 1
                ? testData.value.question.length - 1
                : (active += 1);
        testData.value = {
            ...testData.value,
            index: (testData.value.index += 1),
            active,
            options: testData.value.question[active].options,
        };
        testData.value.question[index].accuracy = text == answerText ? 1 : 0;
        testData.value.question[index].youAnswer = text;
    } catch (error) {
        console.log(error);
    }
};

const goBack = () => {
    router.back();
};

const editWordbook = (id) => {
    // 编辑单词本逻辑
    console.log("编辑单词本", id);
};
</script>

<style scoped>
.container {
    padding: 10px;
}
.container .question {
    width: 100%;
    height: 40vh;
    /* text-align: center; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}
.container .options {
    /* display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px; */
}
.container .options > div {
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 1.2rem;
    border-radius: 10px;
    margin: 10px 0;
}
</style>
